<template>
	<view class="root">
		<view class="header">
			<view class="text">请选择收款方式</view>
		</view>
		<view class="body">
			<view class="payment-term-list">
				<view class="payment-term-item">
					<uni-icons class="icon" type="weixin" size="30"></uni-icons>
					<view class="name">微信</view>
					<button class="button">使用中</button>
				</view>
				<view class="payment-term-item">
					<uni-icons class="icon" type="wallet-filled" size="30"></uni-icons>
					<view class="name">支付宝</view>
					<button class="button">使用</button>
				</view>
			</view>
		</view>
		<view class="bottom">
			<button class="button">确定</button>
		</view>
	</view>
</template>

<script setup>

</script>

<style lang="scss" scoped>

	.root {
		display: flex;
		flex-direction: column;
		
		.header {
			.text {
				padding-left: 10rpx;
				font-size: 36rpx;
				line-height: 100rpx;
			}
		}
		.body {
			.payment-term-list {
				display: flex;
				flex-direction: column;
				gap: 20rpx;
				
				.payment-term-item {
					display: grid;
					grid-template-columns: 100rpx 1fr 200rpx;
					justify-content: center;
					align-items: center;
					padding-left: 10rpx;
					padding-right: 12rpx;
					border: 2rpx solid #d8d8d8;
					border-radius: 24rpx;
					height: 110rpx;
					.icon {
						
					}
					.name {
						font-weight: 700;
					}
					.button {
						border-radius: 50rpx;
						width: 180rpx;
						height: 50%;
						display: flex;
						justify-content: center;
						align-items: center;
						font-size: 30rpx;
						font-weight: 700;
						background-color: white;
						border: 2rpx solid #d8d8d8;
					}
				}
			}
		}
		.bottom {
			width: 100%;
			height: 300rpx;
			padding-top: 100rpx;
			.button {
				background-color: #2ec076;
				width: 85%;
				color: white;
				font-weight: 700;
			}
		}
	}
	
	
</style>
